<template>
  <div class="app-container">
    <el-col :span="12">
      <el-card>
        <template #header>
          <div>
            <span>通用文件上传示例</span>
          </div>
        </template>
        <el-form label-width="120px">
          <el-form-item label="上传附件">
            <!-- 上传的文件名在组件的data中指定，如果用随机值则删除相应配置，尝试用参数动态改变，存在延迟，只支持文件名fileName和扩展名extName参数 -->
            <el-upload
              ref="upload" :limit="1" accept=".txt" :headers="upload.headers" :action="upload.url"
              :data="{ fileName: 'testUploadFile', extName: 'txt',}" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess" :auto-upload="false" drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip" style="color:red">提示：仅允许导入“txt”格式文件！</div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="文件存储ID">{{ upload.storageId }} </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFileForm">上传</el-button>
            <el-button type="primary" @click="downloadFile(false)">下载</el-button>
            <el-button type="danger" @click="downloadFile(true)">下载并删除</el-button>
            <el-button type="danger" @click="deleteFile">删除</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { post } from "@/utils/ajax";
import defaultSettings from '@/settings'

export default {
  data() {
    return {
      // 用户导入参数
      upload: {
        // 文件存储ID
        storageId: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { [defaultSettings.tokenName]: "Bearer " + getToken() },
        // 上传的地址
        url: import.meta.env.VUE_APP_BASE_API + "/common/file/upload"
      }
    }
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess: function (response, file, fileList) {
      this.upload.isUploading = false;
      if (response.code === '200') {
        this.msgSuccess("上传成功");
        this.upload.storageId = response.data;
        this.$refs.upload.clearFiles();
      } else {
        this.msgError("上传失败：" + response.msg);
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 下载文件
    downloadFile(isDelete) {
      if (!this.upload.storageId) {
        this.msgError("请先上传文件");
        return;
      }
      this.downloadUrl('/common/file/download', { storageId: this.upload.storageId, delete: isDelete === true });
    },
    // 删除文件
    deleteFile() {
      if (!this.upload.storageId) {
        this.msgError("请先上传文件");
        return;
      }
      post('/common/file/delete', { storageId: this.upload.storageId }).then(res => {
        if (res.code === '200') {
          this.msgSuccess("删除成功");
        } else {
          this.msgError("删除失败：" + response.msg);
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
</style>